let id1;//公共id
let page = 1;//当前页面页码为1
let counting = 5;//每页显示5条数据
//dom已经加载完成
$(document).ready(function () {
    disPlayData(staff);//初始化数据
    resetData();//重置数据
    delEmployee();//删除数据
    addEmployee();//添加数据
    editEmployee();//修改数据
    refreshFn();//刷新（重新渲染数据）
})

//显示数据
function disPlayData(arr) {
    //每次渲染数据前先清空tbody里面的数据
    $(".tbContent").html('');
    console.log(arr);
    //根据数据长度返回选定的数据，返回一个新数组
    let paginationArr = arr.slice((page - 1) * counting, page * counting);//0-5  0,1,2,3,4
    for (let i = 0; i < paginationArr.length; i++) {
        let oTr = document.createElement("tr");
        oTr.innerHTML = `
        <td>${i + 1}</td>
        <td>${paginationArr[i].id}</td>
        <td>${paginationArr[i].name}</td>
        <td>${paginationArr[i].sex}</td>
        <td>${paginationArr[i].department}</td>
        <td>${paginationArr[i].post}</td>
        <td>${paginationArr[i].phone}</td>
        <td>${paginationArr[i].remarks}</td>
        <td><button class="editBtn" data-toggle="modal" data-target="#editModal" data-index="${paginationArr[i].id}">编辑</button>
        <button class="delBtn" data-toggle="modal" data-target="#delModal" data-index="${paginationArr[i].id}">删除</button></td>
        `;
        $(".tbContent").append(oTr);
    }
    pagination(arr);
    searchData();
    asyncLocalStory("staff");
}

//显示分页
function pagination(arr) {
    $(".changePage").children().html('');
    //根据数据的长度重新创建页码
    let str = '';
    for (let i = 1; i <= Math.ceil(arr.length / counting); i++) {
        //创建页码li
        if (i == page) {
            //如果li和当前的页码一致，给他加一个选中的class
            str += `<li class="active"><a class="pageBtn" href="#">${i}</a></li>`;
        } else {
            str += `<li><a class="pageBtn" href="#">${i}</a></li>`;
        }
    }
    $(".changePage").html(`<li class=""><a href="#" class="prev"><span class="navigation">&laquo;</span></a></li>${str}<li class=""><a href="#" class="next"><span class="navigation">&raquo;</span></a></li>`);
}
//给分页添加点击事件
$(".changePage").on("click", function (e) {
    if (e.target.className == "pageBtn") {
        page = e.target.innerHTML;
        disPlayData(staff);
    }
});

//给上一页加事件
$(".changePage").on("click", ".prev", function () {
    if (page > 1) {
        page--;
        disPlayData(staff);
    }
});
//给下一页加事件
$(".changePage").on("click", ".next", function () {
    if (page < Math.ceil(staff.length / counting)) {
        page++;
        disPlayData(staff);
    }
});

//查询
function searchData() {
    $(".searchBtn").on("click", function () {
        let str1 = $(".workId").val();
        let str2 = $(".inpName").val();
        let str3 = $(".inpDepartment").val();
        let data1 = [];
        let data2 = [];
        let data3 = [];
        if (str1.trim() == '') {
            data1 = staff;
        } else {
            for (let i = 0; i < staff.length; i++) {
                if (staff[i].id == str1) {
                    data1.push(staff[i]);
                }
            }
        }
        console.log("data1", data1);
        if (str2.trim() == '') {
            data2 = data1;
        } else {
            for (let i = 0; i < data1.length; i++) {
                if (data1[i].name == str2) {
                    data2.push(data1[i]);
                }
            }
        }
        console.log("data2", data2);
        if (str3.trim() == '') {
            data3 = data2;
        } else {
            for (let i = 0; i < data2.length; i++) {
                if (data2[i].department == str3) {
                    data3.push(data2[i]);
                }
            }
        }
        console.log("data3", data3);
        page = 1;
        disPlayData(data3);
    })
}

//重置
function resetData() {
    $(".resetBtn").on("click", function () {
        $(".workId").val('');
        $(".inpName").val('');
        $(".inpDepartment").val('');
        disPlayData(staff);
    })
}

//添加数据
function addEmployee() {
    $(".addSaveBtn").on("click", function () {
        let id = 0;
        //id自增
        for (let i = 0; i < staff.length; i++) {
            if (id < staff[i].id) {
                id = staff[i].id;
            }
        }
        id++
        let gongHao = {
            id: id,
            name: $(".addName").val(),
            sex: $(".addSex").val(),
            department: $(".addDepartment").val(),
            post: $(".addPost").val(),
            phone: $(".addTel").val(),
            remarks: $(".addRemarks").val()
        }
        staff.push(gongHao);
        $("#addModal").modal("hide");
        // $(".addId").val('');
        $(".addName").val('');
        $(".addSex").val('');
        $(".addDepartment").val('');
        $(".addPost").val('');
        $(".addTel").val('');
        $(".addRemarks").val('');
        disPlayData(staff);
        asyncLocalStory("staff");
    })
}

//删除数据
function delEmployee() {
    $(".tbContent").on("click", "button", function (e) {
        id1 = $(e.target).attr("data-index");
    })
}
$(".deleteBtn").on("click", function () {
    $("#delModal").modal("hide");
    page = 1;
    delEmployeeData(id1);
    disPlayData(staff);
    asyncLocalStory("staff");
})

//修改数据
function editEmployee() {
    $(".editSure").click(function () {
        console.log(id1);
        for (let i = 0; i < staff.length; i++) {
            if (staff[i].id == id1) {
                console.log(1);
                staff[i].name = $("#editName").val();
                staff[i].sex = $("#editSex").val();
                staff[i].department = $("#editDepartment").val();
                staff[i].post = $("#editPost").val();
                staff[i].phone = $("#editTel").val();
                staff[i].remarks = $("#editRemarks").val();
            }
        }
        $("#editModal").modal("hide");
        $("#editId").val('');
        $("#editName").val('');
        $("#editSex").val('');
        $("#editDepartment").val('');
        $("#editPost").val('');
        $("#editTel").val('');
        $("#editRemarks").val('');
        asyncLocalStory("staff");
        disPlayData(staff);
    })
}
function refreshFn() {
    $(".refresh").on("click", function () {
        location.reload();
    })
}
